<!--
 * @Author: your name
 * @Date: 2020-10-15 23:13:20
 * @LastEditTime: 2020-10-23 10:13:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \electron-quick-start\src\renderer\components\Form\index.vue
-->
<template>
  <el-form
    ref="form"
    :model="values"
    :inline="inline"
    class="house-keeper-form"
    :label-position="labelPosition"
    :rules="rules"
    :validate-on-rule-change="false"
    size="small"
    :disabled="disabled"
  >
    <el-form-item
      v-for="(field, index) in fields"
      :key="index"
      :prop="field.prop"
      :label="field.label"
      :label-width="field.labelWidth"
      :style="getItemStyle(field)"
    >
      <slot v-if="$slots[field.prop]" :name="field.prop"></slot>
      <span v-else>
        <HouserKeeperInput
          :placeholder="field.placeholder"
          v-model="values[field.prop]"
          :disabled="field.disabled"
          v-if="field.type === 'input'"
          :maxlength="field.max"
          @input="$emit('computedMoney', $event, field.label)"
          @focus="$emit('inputFocus', $event, field.prop)"
          @keyup.up.native="$emit('inputKeyUp', $event, field.label)"
          @keyup.down.native="$emit('inputKeyDown', $event, field.label)"
          @keyup.enter.native="$emit('inputKeyEnter', $event, field.prop)"
          :unit="field.unit"
        ></HouserKeeperInput>
      <HouserKeeperInput
          :placeholder="field.placeholder"
          v-model="values[field.prop]"
          :disabled="field.disabled"
          v-if="field.type === 'number'"
          :maxlength="field.max"
          @input="$emit('computedMoney', $event, field.label)"
          @focus="$emit('inputFocus', $event, field.prop)"
          @keyup.up.native="$emit('inputKeyUp', $event, field.label)"
          @keyup.down.native="$emit('inputKeyDown', $event, field.label)"
          @keyup.enter.native="$emit('inputKeyEnter', $event, field.prop)"
          :unit="field.unit"
        ></HouserKeeperInput>

        <HouserKeeperInput
          :placeholder="field.placeholder"
          v-model="values[field.prop]"
           :disabled="field.disabled"
          v-if="field.type === 'input.textarea'"
          @input="$emit('computedMoney', $event, field.label)"
          :maxlength="field.max"
          type="textarea"
        ></HouserKeeperInput>
        <HouserKeeperInput
          :placeholder="field.placeholder"
          v-model="values[field.prop]"
          v-if="field.type === 'input.password'"
          type="password"
          :maxlength="field.max"
          :showPassword="field.showPassword"
        ></HouserKeeperInput>
        <!--
                    ps: 问了设计，select用element-ui的就行了
        -->
        <el-autocomplete
          class="inline-input"
          v-model="values[field.prop]"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="true"
          :placeholder="field.placeholder"
          @select="handleSelect($event, field.prop)"
          @focus="fetchFocus(field)"
          @blur="clearFormData"
          :disabled="field.disabled"
          :maxlength="field.max"
          :debounce="0"
          v-if="field.type === 'input_select'"
        ></el-autocomplete>
        <el-select
          v-model="values[field.prop]"
          filterable
          :clearable="!field.clearable"
          :remote="remote"
          :placeholder="field.placeholder"
          v-if="field.type === 'select_search'"
          :popper-append-to-body="append_flag"
          :disabled="field.disabled"
           :remote-method="remoteMethod"
           :loading="loading"
          @focus="focus(field.prop,field.label)"
          @clear="clear"
          @change="$emit('change', $event, field.prop)"
        >
          <el-option
            v-for="option in options[field.prop]"
            :key="option[field.bindValue]"
            :label="option[field.bindLabel]"
            :value="option[field.bindValue]"
          ></el-option>
        </el-select>
        <el-select
          :clearable="!field.clearable"
          :placeholder="field.placeholder"
          :filterable="false"
          v-model="values[field.prop]"
          v-if="field.type === 'select_'"
          style="width: 100%"
          :multiple="field.multiple"
          :disabled="field.disabled"
          @change="$emit('change', $event, field.prop)"
        >
          <el-option
            v-for="option in options[field.prop]"
            :key="option[field.bindValue]"
            :label="option[field.bindLabel]"
            :value="option[field.bindValue]"
          ></el-option>
        </el-select>
        <el-select
          :clearable="field.clearable"
          :placeholder="field.placeholder"
          :filterable="false"
          v-model="values[field.prop]"
          v-if="field.type === 'noselect_'"
          style="width: 100%"
          :multiple="field.multiple"
          :disabled="field.disabled"
          @change="$emit('change', $event, field.prop)"
        >
          <el-option
            v-for="option in options[field.prop]"
            :key="option[field.bindValue]"
            :label="option[field.bindLabel]"
            :value="option[field.bindValue]"
          ></el-option>
        </el-select>

        <el-select
          :clearable="!field.clearable"
          :placeholder="field.placeholder"
          :filterable="true"
          v-model="values[field.prop]"
          v-if="field.type === 'select_input_search'"
          style="width: 100%"
          allow-create
          :multiple="field.multiple"
          :disabled="field.disabled"
          @focus="$emit('focus', field.prop)"
             @change="$emit('change', $event, field.prop)"
        >
          <el-option
            v-for="option in options[field.prop]"
            :key="option[field.bindValue]"
            :label="option[field.bindLabel]"
            :value="option[field.bindValue]"
          ></el-option>
        </el-select>

        <HouserKeeperSelectTree
          :placeholder="field.placeholder"
          v-model="values[field.prop]"
          v-if="field.type === 'select.tree'"
          style="width: 100%"
          :multiple="field.multiple"
          :data="options[field.prop]"
          :disabled="field.disabled"
          :bindValue="field.bindValue"
          :bindLabel="field.bindLabel"
        ></HouserKeeperSelectTree>
        <!-- 日期组件 -->
        <el-date-picker
          v-model="values[field.prop]"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          v-if="field.type === 'date'"
          type="date"
          :disabled="field.disabled"
          :placeholder="field.placeholder"
          @change="$emit('change', $event, field.prop)"
          :picker-options="pickerOptions[field.prop]"
          :editable="false"
          :clearable="true"
        ></el-date-picker>
        <el-date-picker
          v-model="values[field.prop]"
          value-format="yyyy-MM"
          format="yyyy-MM"
          v-if="field.type === 'month'"
          type="month"
          :disabled="field.disabled"
          :placeholder="field.placeholder"
          @change="$emit('change', $event, field.prop)"
          :picker-options="pickerOptions[field.prop]"
          :editable="false"
          :clearable="false"
        ></el-date-picker>
        <el-date-picker
          v-model="values[field.prop]"
          v-if="field.type === 'datetime'"
          type="datetime"
          :disabled="field.disabled"
          :placeholder="field.placeholder"
          @change="$emit('change', $event, field.prop)"
          :picker-options="pickerOptions[field.prop]"
          :editable="false"
          :clearable="false"
        ></el-date-picker>
      </span>
    </el-form-item>
  </el-form>
</template>

<script>
import HouserKeeperInput from "./input";
import HouserKeeperSelectTree from "./selectTree";
export default {
  name: "HouserKeeperForm",
  data() {
    return {};
  },
  props: {
      pickerOptions: {
      type: Object,
      default: () => ({}),
    },
    btn: {
      type: Boolean,
      default: false,
    },
    append_flag: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    inline: {
      type: Boolean,
      default: true,
    },
    loading:{
     type: Boolean,
      default: false,
    },
    remote:{
    type: Boolean,
      default: false,
    },
    labelWidth: {
      type: String,
      default: "auto",
    },
    itemStyle: {
      type: String,
      default: "auto",
    },
    fields: {
      type: Array,
      default: () => [],
    },
    values: {
      type: Object,
      default: () => ({}),
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    rules: {
      type: Object,
      default: () => ({}),
    },
    labelPosition: {
      type: String,
      default: "left",
    },
    regionHiera: {
      type: Array,
    },
  },
  components: {
    HouserKeeperInput,
    HouserKeeperSelectTree,
  },
  computed: {
    getItemStyle() {
      return (field) => {
        let style = `${this.itemStyle};`;
        field.itemWidth && (style += `width:${field.itemWidth}`);
        return style;
      };
    },
  },
  mounted() {},
  // 把form组件原有的方法暴露出去
  methods: {
    validate(cb) {
      return this.$refs.form.validate(cb);
    },
    validateField(props) {
      return this.$refs.form.validateField(props);
    },
    resetFields() {
      return this.$refs.form.resetFields();
    },
    clearValidate(props) {
      return this.$refs.form.clearValidate(props);
    },

    querySearch(queryString, callback) {
      this.$emit("querySearch", queryString, callback);
    },
    handleSelect(val, prop) {
      this.$emit("handleSelect", val, prop);
    },
    selectChange(val) {
      this.$emit("selectChange");
    },
    fetchFocus(field) {
      this.$emit("fetchFocus", field);
    },
    clearFormData() {
      this.$emit("clearFormData");
    },
    focus(label) {
      // console.log(123);
      this.$emit("focus", label);
    },
    clear(value) {
      this.$emit("clear");
    },
    remoteMethod(val){
    this.$emit("remoteMethod",val)
    },
  },
};
</script>
<style lang="scss" scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.iocns {
  position: absolute;
}
.el-cascader {
  width: 100%;
}
  /deep/ .ivu-input[disabled]{
    background-color: #F5F7FA;
}
/deep/ .el-form-item__label::before {
  font-size: 16px !important;
  font-weight: 700 !important;
  position: relative;
  top: 4px;
}
/deep/input[type="number"] {
  -moz-appearance: textfield;
  line-height: 1;
}
</style>